<!DOCTYPE html>
<html>
	<head>
		<title>图片编辑</title>
		<meta charset="UTF-8" />
	</head>
	<body>
		<canvas id="test_1" width="900" height="300" style="background: #000;"></canvas>
		<script>
			var c = document.getElementById('test_1');
			var ctx = c.getContext('2d');

			var image1 = new Image();
			image1.src = 'images/images_1.jpg';
			image1.onload = function() {
				ctx.drawImage(image1, 0, 0, 300, 300);

				var image1data = ctx.getImageData(0, 0, 300, 300);
				var pixels = image1data.data;

				/* 简单滤镜
				 ---------------------------------------------------------------------- */

				for (var i = 0, n = pixels.length; i < n; i += 4) {

					var r = pixels[i];
					var g = pixels[i + 1];
					var b = pixels[i + 2];
					/*
					 // 变灰
					 var v = r * .3 + g * .59 + b * .11;
					 pixels[i] = pixels[i + 1] = pixels[i + 2] = v;
					 */
					/*
					 // 变亮
					 pixels[i] += 100;
					 pixels[i + 1] += 100;
					 pixels[i + 2] += 100;
					 */

					/*
					 // 变暗
					 pixels[i] -= 100;
					 pixels[i + 1] -= 100;
					 pixels[i + 2] -= 100;
					 */
					/*
					 // 反色
					 pixels[i] = 255 - r;
					 pixels[i + 1] = 255 - g;
					 pixels[i + 2] = 255 - b;
					 */
				}

				//ctx.putImageData(image1data, 300, 0);

				/* 高级滤镜   卷机矩阵
				---------------------------------------------------------------------- */

				// 锐化
				matrix1 = [0, -1, 0, -1, 5, -1, 0, -1, 0, 1, 0];

				// 浮雕
				matrix2 = [-6, -3, 0, -3, 1, 3, 0, 3, 6, 1, 0];

				// 增加对比对
				matrix3 = [0, 0, 0, 0, 2, 0, 0, 0, 0, 1, -255];

				// 颜色嘉盛
				matrix4 = [0, -2, 0, -2, 20, -2, 0, -2, 0, 10, -40];

				// 边缘增强
				matrix5 = [0, -1, 0, -1, 4, -1, 0, -1, 0, 1, 127];

				// 白色边缘增强
				matrix6 = [0, -1, 0, -1, 4, -1, 0, -1, 0, -1, 255];

				// 模糊
				matrix7 = [0, 1, 0, 1, 1, 1, 0, 1, 0, 5, 0];

				var output = ConvolutionMatrix(image1data, matrix7, 1, 0);
				ctx.putImageData(output, 300, 0);

				/* 镜像
				 ---------------------------------------------------------------------- */

				var tempCanvasData = ctx.createImageData(image1data.width, image1data.height);
				tempCanvasData.data.set(image1data.data);
				for (var x = 0; x < tempCanvasData.width; x++)// column
				{
					for (var y = 0; y < tempCanvasData.height; y++)// row
					{

						// Index of the pixel in the array
						var idx = (x + y * tempCanvasData.width) * 4;
						var midx = (((tempCanvasData.width - 1) - x) + y * tempCanvasData.width) * 4;

						// assign new pixel value
						image1data.data[midx + 0] = tempCanvasData.data[idx + 0];
						// Red channel
						image1data.data[midx + 1] = tempCanvasData.data[idx + 1];
						// Green channel
						image1data.data[midx + 2] = tempCanvasData.data[idx + 2];
						// Blue channel
						image1data.data[midx + 3] = 255;
						// Alpha channel
						//console.log(midx + '->' + idx)
					}
				}
				//ctx.putImageData(image1data, 310, 0);
				/* 图片压缩
				 ---------------------------------------------------------------------- */
				var c2 = document.createElement("canvas");
				c2.width = 1000;
				c2.height = 1000;
				var ctx2 = c2.getContext("2d").drawImage(image1, 0, 0, 1000, 1000);
				var newImageData = c2.toDataURL('image/jpeg', 80 / 100);
				console.log(newImageData);
			}
			// 计算卷积矩阵的函数
			function ConvolutionMatrix(input, matrix, divisor, offset) {
				// 创建一个输出的 imageData 对象
				var output = document.createElement("canvas").getContext('2d').createImageData(input);

				var w = input.width, h = input.height;
				var iD = input.data, oD = output.data;
				var m = matrix;

				// 对除了边缘的点之外的内部点的 RGB 进行操作，透明度在最后都设为 255
				for (var y = 1; y < h - 1; y += 1) {
					for (var x = 1; x < w - 1; x += 1) {
						for (var c = 0; c < 3; c += 1) {
							var i = (y * w + x) * 4 + c;
							oD[i] = offset + (m[0] * iD[i - w * 4 - 4] + m[1] * iD[i - w * 4] + m[2] * iD[i - w * 4 + 4] + m[3] * iD[i - 4] + m[4] * iD[i] + m[5] * iD[i + 4] + m[6] * iD[i + w * 4 - 4] + m[7] * iD[i + w * 4] + m[8] * iD[i + w * 4 + 4]) / divisor;
						}
						oD[(y * w + x) * 4 + 3] = 255;
						// 设置透明度
					}
				}
				return output;
			}
		</script>
	</body>
</html>